<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>购物车-小懒猫</title>
	<meta name="keywords" content="关键字,关键字"/>
	<meta name="description" content="描述信息">
	<style>
		*{margin:0;padding:0;}
		#app{margin: 30px;}
		table{width: 100%;border-collapse: collapse;margin-bottom: 30px;}
		td{border:1px solid #ccc;padding:10px;}
		.titleMain{
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}
		.manuser{
			font-size: 18px;
			font-weight: bold;
		}
		.womenuser{
			font-size: 18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="titleMain">{{title}}</div>
		<table>
		    <thead>
		        <tr>
		            <td>ID</td>
		            <td>产品</td>
		            <td>数量</td>
					<td>价格</td>
		            <td>小计</td>
					<td>操作</td>
		        </tr>
		    </thead>
		    <tbody>
		        <tr v-for="(product,index) in productList" :key="product.id">
		            <td>{{product.id}}</td>
		            <td>{{product.name}}</td>
		            <td>{{product.count}}</td>
		            <td>{{product.price}}</td>
					<td>{{product.price*product.count}}</td>
					<td><button @click="delproduct(index)">删除</button></td>
		        </tr>
		    </tbody>
			<tfoot>
				<tr>
					<td colspan="6">总价格:<span style="color:red;">{{totalprice}}</span></td>
				</tr>
			</tfoot>
		</table>
	</div>
	<script src="js/vue-min.js"></script>
	<script setup>
		const app = Vue.createApp({
			data() {
				return {
					title : "购物车",
					productList : []
				}
			},
			methods : {
				loadData(){
					this.productList = [
						{id:1,name:"Java书籍",count:2,price:20},
						{id:2,name:"Docker书籍",count:1,price:10},
						{id:3,name:"Html书籍",count:3,price:5},
					];
				},
				delproduct(index){
					this.productList.splice(index,1);
				}
			},
			computed : {
				totalprice(){
					if(this.productList.length>0){
						return this.productList.map(p=>p.count*p.price).reduce((pre,product)=>pre+product);
					}
					return 0;
				}
			},
			created() {
				this.loadData();
			}
		
		});
		app.mount("#app");
	</script>
</body>
</html>
